<template>
  <div class="commerce-panel">
    <div class="commerce-panel-header">
      <h4>电商设计</h4>
      <div class="commerce-actions">
        <el-radio-group v-model="activeTab" size="small">
          <el-radio-button label="templates">模板</el-radio-button>
          <el-radio-button label="elements">元素</el-radio-button>
          <el-radio-button label="products">商品卡片</el-radio-button>
          <el-radio-button label="banners">促销横幅</el-radio-button>
          <el-radio-button label="details">详情页</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    
    <div class="commerce-content">
      <!-- 模板选项卡 -->
      <div v-show="activeTab === 'templates'">
        <div class="platform-selector">
          <el-select v-model="selectedPlatform" placeholder="选择平台" size="small">
            <el-option v-for="platform in platforms" :key="platform.value" :label="platform.label" :value="platform.value" />
          </el-select>
        </div>
        
        <div class="platform-content" v-if="selectedPlatform">
          <div class="tab-buttons">
            <el-radio-group v-model="selectedCategory" size="small">
              <el-radio-button v-for="category in categories" :key="category.value" :label="category.value">
                {{ category.label }}
              </el-radio-button>
            </el-radio-group>
          </div>
          
          <div class="template-search">
            <el-input 
              placeholder="搜索模板" 
              prefix-icon="el-icon-search" 
              v-model="searchQuery"
              size="small"
              clearable
            />
          </div>
          
          <div class="commerce-templates">
            <div class="template-section" v-for="section in filteredSections" :key="section.name">
              <h5 class="section-title">{{ section.title }}</h5>
              <div class="template-grid">
                <div 
                  v-for="template in section.templates" 
                  :key="template.id" 
                  class="commerce-template-item"
                  @click="selectTemplate(template)"
                >
                  <div class="template-thumbnail">
                    <img :src="template.thumbnail" :alt="template.name" />
                  </div>
                  <div class="template-info">
                    <div class="template-name">{{ template.name }}</div>
                    <div class="template-size">{{ template.size }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="platform-selector" v-else>
          <h5>选择电商平台</h5>
          <div class="platform-grid">
            <div 
              v-for="platform in platforms" 
              :key="platform.value" 
              class="platform-item"
              @click="selectedPlatform = platform.value"
            >
              <div class="platform-icon">
                <img :src="platform.icon" :alt="platform.label" />
              </div>
              <div class="platform-name">{{ platform.label }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 元素选项卡 -->
      <div v-show="activeTab === 'elements'" class="elements-tab">
        <commerce-elements @add-element="addElementToCanvas" />
      </div>
      
      <!-- 商品卡片选项卡 -->
      <div v-show="activeTab === 'products'" class="products-tab">
        <product-card-template @apply-template="applyProductTemplate" />
      </div>
      
      <!-- 促销横幅选项卡 -->
      <div v-show="activeTab === 'banners'" class="banners-tab">
        <promotional-banner @apply-template="applyBannerTemplate" />
      </div>
      
      <!-- 详情页选项卡 -->
      <div v-show="activeTab === 'details'" class="details-tab">
        <detail-page-template @apply-template="applyDetailTemplate" />
      </div>
    </div>
    
    <!-- 模板预览弹窗 -->
    <div v-if="selectedTemplate" class="template-preview-overlay">
      <div class="template-preview">
        <div class="preview-header">
          <h5>{{ selectedTemplate.name }}</h5>
          <el-button icon="el-icon-close" circle size="mini" @click="closePreview"></el-button>
        </div>
        <div class="preview-image">
          <img :src="selectedTemplate.preview || selectedTemplate.thumbnail" :alt="selectedTemplate.name" />
        </div>
        <div class="preview-actions">
          <el-button type="primary" size="small" @click="useTemplate">使用模板</el-button>
          <el-button size="small" @click="customizeTemplate">自定义</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import CommerceElements from './CommerceElements.vue';
import ProductCardTemplate from './ProductCardTemplate.vue';
import PromotionalBanner from './PromotionalBanner.vue';
import DetailPageTemplate from './DetailPageTemplate.vue';

const emit = defineEmits(['apply-template', 'add-element']);

// 活动选项卡
const activeTab = ref('templates');

// 平台选择
const selectedPlatform = ref('');
const platforms = [
  { label: '淘宝', value: 'taobao', icon: '/images/platforms/taobao.png' },
  { label: '京东', value: 'jd', icon: '/images/platforms/jd.png' },
  { label: '拼多多', value: 'pdd', icon: '/images/platforms/pdd.png' },
  { label: '抖音', value: 'douyin', icon: '/images/platforms/douyin.png' },
  { label: '快手', value: 'kuaishou', icon: '/images/platforms/kuaishou.png' }
];

// 类别选择
const selectedCategory = ref('all');
const categories = [
  { label: '全部', value: 'all' },
  { label: '主图', value: 'main' },
  { label: '详情', value: 'detail' },
  { label: '直播', value: 'live' },
  { label: '海报', value: 'poster' }
];

// 搜索
const searchQuery = ref('');

// 模板数据
const templateSections = computed(() => {
  if (selectedPlatform.value === 'taobao') {
    return [
      {
        name: 'recommended',
        title: '推荐模板',
        templates: [
          { id: 't1', name: '618主图模板', thumbnail: '/images/ecommerce/taobao/t1-thumb.jpg', preview: '/images/ecommerce/taobao/t1-preview.jpg', size: '800x800', category: 'main' },
          { id: 't2', name: '双11商品主图', thumbnail: '/images/ecommerce/taobao/t2-thumb.jpg', preview: '/images/ecommerce/taobao/t2-preview.jpg', size: '800x800', category: 'main' },
          { id: 't3', name: '秋季新品上市', thumbnail: '/images/ecommerce/taobao/t3-thumb.jpg', preview: '/images/ecommerce/taobao/t3-preview.jpg', size: '800x800', category: 'main' },
          { id: 't4', name: '服装搭配组合', thumbnail: '/images/ecommerce/taobao/t4-thumb.jpg', preview: '/images/ecommerce/taobao/t4-preview.jpg', size: '800x800', category: 'main' }
        ]
      },
      {
        name: 'detail',
        title: '详情页模板',
        templates: [
          { id: 't5', name: '普通详情模板', thumbnail: '/images/ecommerce/taobao/t5-thumb.jpg', preview: '/images/ecommerce/taobao/t5-preview.jpg', size: '750x各页高', category: 'detail' },
          { id: 't6', name: '尺寸说明模板', thumbnail: '/images/ecommerce/taobao/t6-thumb.jpg', preview: '/images/ecommerce/taobao/t6-preview.jpg', size: '750x500', category: 'detail' },
          { id: 't7', name: '产品参数模板', thumbnail: '/images/ecommerce/taobao/t7-thumb.jpg', preview: '/images/ecommerce/taobao/t7-preview.jpg', size: '750x600', category: 'detail' },
          { id: 't8', name: '优惠券模板', thumbnail: '/images/ecommerce/taobao/t8-thumb.jpg', preview: '/images/ecommerce/taobao/t8-preview.jpg', size: '750x300', category: 'detail' }
        ]
      },
      {
        name: 'live',
        title: '直播间模板',
        templates: [
          { id: 't9', name: '直播间主图', thumbnail: '/images/ecommerce/taobao/t9-thumb.jpg', preview: '/images/ecommerce/taobao/t9-preview.jpg', size: '1080x1920', category: 'live' },
          { id: 't10', name: '直播间封面', thumbnail: '/images/ecommerce/taobao/t10-thumb.jpg', preview: '/images/ecommerce/taobao/t10-preview.jpg', size: '1080x1080', category: 'live' },
          { id: 't11', name: '直播倒计时', thumbnail: '/images/ecommerce/taobao/t11-thumb.jpg', preview: '/images/ecommerce/taobao/t11-preview.jpg', size: '1080x1920', category: 'live' }
        ]
      }
    ];
  } else if (selectedPlatform.value === 'jd') {
    return [
      {
        name: 'recommended',
        title: '推荐模板',
        templates: [
          { id: 'j1', name: '京东主图模板', thumbnail: '/images/ecommerce/jd/j1-thumb.jpg', preview: '/images/ecommerce/jd/j1-preview.jpg', size: '800x800', category: 'main' },
          { id: 'j2', name: '京东活动主图', thumbnail: '/images/ecommerce/jd/j2-thumb.jpg', preview: '/images/ecommerce/jd/j2-preview.jpg', size: '800x800', category: 'main' }
        ]
      },
      {
        name: 'detail',
        title: '详情页模板',
        templates: [
          { id: 'j3', name: '京东详情页', thumbnail: '/images/ecommerce/jd/j3-thumb.jpg', preview: '/images/ecommerce/jd/j3-preview.jpg', size: '750x各页高', category: 'detail' },
          { id: 'j4', name: '产品规格模板', thumbnail: '/images/ecommerce/jd/j4-thumb.jpg', preview: '/images/ecommerce/jd/j4-preview.jpg', size: '750x500', category: 'detail' }
        ]
      }
    ];
  } else {
    return [];
  }
});

// 根据筛选条件过滤模板
const filteredSections = computed(() => {
  if (!selectedPlatform.value) return [];
  
  return templateSections.value.map(section => {
    const filteredTemplates = section.templates.filter(template => {
      // 类别筛选
      const categoryMatch = selectedCategory.value === 'all' || template.category === selectedCategory.value;
      
      // 搜索筛选
      const searchMatch = !searchQuery.value || 
        template.name.toLowerCase().includes(searchQuery.value.toLowerCase());
      
      return categoryMatch && searchMatch;
    });
    
    return {
      ...section,
      templates: filteredTemplates
    };
  }).filter(section => section.templates.length > 0);
});

// 模板预览
const selectedTemplate = ref(null);

const selectTemplate = (template) => {
  selectedTemplate.value = template;
};

const closePreview = () => {
  selectedTemplate.value = null;
};

const useTemplate = () => {
  if (selectedTemplate.value) {
    emit('apply-template', selectedTemplate.value);
    selectedTemplate.value = null;
  }
};

const customizeTemplate = () => {
  if (selectedTemplate.value) {
    // 自定义模板逻辑
    emit('apply-template', {...selectedTemplate.value, customize: true});
    selectedTemplate.value = null;
  }
};

// 添加元素到画布
function addElementToCanvas(element) {
  emit('add-element', element);
}

// 应用商品卡片模板
function applyProductTemplate(template) {
  emit('apply-template', {
    ...template,
    type: 'product-card'
  });
}

// 应用促销横幅模板
function applyBannerTemplate(template) {
  emit('apply-template', {
    ...template,
    type: 'promotional-banner'
  });
}

// 应用详情页模板
function applyDetailTemplate(template) {
  emit('apply-template', {
    ...template,
    type: 'detail-page'
  });
}
</script>

<style scoped>
.commerce-panel {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.commerce-panel-header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 15px;
}

.commerce-panel-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.commerce-content {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

.tab-buttons {
  margin-bottom: 15px;
  overflow-x: auto;
  white-space: nowrap;
}

.template-search {
  margin-bottom: 15px;
}

.commerce-templates {
  flex: 1;
  overflow-y: auto;
}

.template-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 13px;
  color: #606266;
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.commerce-template-item {
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ebeef5;
  transition: all 0.3s;
}

.commerce-template-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: #c6e2ff;
}

.template-thumbnail {
  width: 100%;
  height: 100px;
  background-color: #f5f7fa;
}

.template-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-info {
  padding: 5px 8px;
  background-color: #fff;
}

.template-name {
  font-size: 12px;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-size {
  font-size: 11px;
  color: #909399;
}

.platform-selector {
  padding: 15px 0;
}

.platform-selector h5 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  color: #606266;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.platform-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  transition: all 0.3s;
}

.platform-item:hover {
  background-color: #ecf5ff;
}

.platform-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}

.platform-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.platform-name {
  font-size: 12px;
  color: #606266;
}

/* 模板预览弹窗 */
.template-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.template-preview {
  width: 90%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #ebeef5;
}

.preview-header h5 {
  margin: 0;
  font-size: 14px;
  color: #303133;
}

.preview-image {
  padding: 15px;
  background-color: #f5f7fa;
  text-align: center;
}

.preview-image img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}

.preview-actions {
  padding: 10px 15px;
  display: flex;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid #ebeef5;
}

/* 选项卡内容样式 */
.elements-tab,
.products-tab,
.banners-tab,
.details-tab {
  height: 100%;
}
</style>